<template>
  <div class="merchantOrderManage">
    <el-table :data="tableNewData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px" :cell-class-name="tableRowClassName" :header-cell-style="isCenter">
      <el-table-column prop="id" label="订单号" width="140" align="center" fixed> </el-table-column>
      <el-table-column prop="bookTitle" label="商品信息" width="300" fixed>
      </el-table-column>
      <el-table-column prop="price" label="单价(元)" align="center" width="90"> </el-table-column>
      <el-table-column prop="num" label="购买数量" align="center" width="80"> </el-table-column>
      <el-table-column prop="sum" label="支付金额(元)" align="center" width="140"> </el-table-column>
      <el-table-column prop="accName" label="用户名称" align="center" width="110"> </el-table-column>
      <el-table-column prop="phone" label="联系方式" align="center" width="115"> </el-table-column>
      <el-table-column prop="addressDetail" label="用户地址" width="160"> </el-table-column>
      <el-table-column prop="orderTime" label="下单时间" align="center" width="160"></el-table-column>
      <el-table-column label="订单状态" align="center" width="80">
        <template slot-scope="scope">
          <div class="tip-tag">
            <el-tag type="info" v-if="scope.row.state === -1">待支付</el-tag>
            <el-tag v-if="scope.row.state === 1">待发货</el-tag>
            <el-tag type="primary" v-if="scope.row.state === 2">待收货</el-tag>
            <el-tag type="danger" v-if="scope.row.state == 3">待评论</el-tag>
            <el-tag type="warning" v-if="scope.row.state == 4">评论完成</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="140" fixed="right">
        <template slot-scope="scope">
          <!-- <el-button type="text" @click="deleteForm(scope.row)" size="mini">详情</el-button> -->
          <el-button type="text" v-if="scope.row.state === 1" @click="deleteForm(scope.row.id)" size="mini">发货</el-button>
         <el-button type="text" v-if="scope.row.state === 2"  size="mini">等待客户收货</el-button>
           <el-button type="text" v-if="scope.row.state === 3"  size="mini">等待客户评价</el-button>
           <el-button type="text" v-if="scope.row.state === 4"  size="mini">订单已完成</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pagesize" layout="total, prev, pager, next, jumper" :total="total"> </el-pagination>
  </div>
</template>

<script>
import { getOrderById, updateState } from '@/api/order'
export default {
  name: 'merchantOrderManage',
  components: {},
  data () {
    return {
      tableNewData: [],
      tableData: [],
      total: 0,
      currentPage: 1, // 初始页
      pagesize: 10 // 每页的数据
    }
  },
  created () {
    this.getOrder()
  },
  mounted () {
    this.getNewTableData()
  },

  methods: {
    // 初始页currentPage
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
    },
    // 表格内容居中显示
    isCenter ({ row, column, rowIndex, columnIndex }) {
      return 'text-align:center'
    },
    // 获取订单
    getOrder () {
      const id = JSON.parse(localStorage.getItem('userMsg')).id
      getOrderById(id).then(res => {
        console.log(res)
        this.tableNewData = res.data.data
      })
    },
    // 发货操作，点击即发货
    deleteForm (id) {
      const data = {
        id: id,
        state: 2
      }
      updateState(data).then(res => {
        if (res.data.meta.status === 200) {
          this.$message({
            message: res.data.meta.msg,
            type: 'success'
          })
          this.getOrder()
        } else {
          this.$message({
            message: res.data.meta.msg,
            type: 'warning'
          })
        }
      })
      this.getOrder()
    }
  }
}
</script>
<style scoped>
.merchantOrderManage {
  background: #fff;
  width: 100%;
  left: 40px;
  right: 40px;
  margin: 0 auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}
.merchantOrderManage .info_box{
    display: flex;
    align-items: center;
    margin: 0 10px;
}

.merchantOrderManage .info_box .info_box_img{
    cursor: pointer;
      width: 50px;
      flex: 0 0 50px;
      margin-right: 6px;
}
.merchantOrderManage .info_box .info_box_img img{
    width: 50px;
        height: 50px;
}
.merchantOrderManage .info_box .info_describe .text{
margin-bottom: 6px;
}
.merchantOrderManage .info_box .info_describe .attr{
color: #9e9e9e;
}
.merchantOrderManage .info_box .info_describe .attr span{
     margin-right: 6px;
}
.el-tag {
  width: 100%;
  height: 36px;
  line-height: 36px;
}
.tip-tag .el-tag{
    text-align: center;
}
</style>
